<%@ page language="java" 
	contentType="text/html;charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" 
		+ request.getServerName() + ":" 
		+ request.getServerPort()
		+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>"/>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>注册页面</title>
<style>
body {
	background-image:url(images/allPilot.jpg);
	background-size: 100%;
}
table {
	font-family: 宋体;
	background-color: lime;
}
tr:hover {
	background-color: orange;
}
</style>
</head>
<body>
	<div>
		<form method="POST" action="login/regeister.action">
			<table>
				<tr>
					<th colspan="2">请注册</th>
				</tr>
				<tr>
					<td>用户名</td>
					<td><input type="text" id="sLoginName" name="sLoginName" maxlength="15"
						placeholder="请输入用户名" onchange="regeisterName(this)"/></td>
				</tr>
				<tr>
					<td>用户名是否可用</td><td id="td1"></td>
				</tr>
				<tr>
					<td>密码</td>
					<td><input type="password" id="sPassword" name="sPassword" placeholder="请输入密码" /></td>
				</tr>
				<tr>
					<td>昵称</td>
					<td><input type="text" id="sName" name="sName" placeholder="请输入昵称" /></td>
				</tr>
				<tr>
					<td></td>
					<td>
					<input id="btn1" type="submit" value="注册"/>
					<input id="btn2" type="button" value="返回登录" onclick="window.location='jsp/login/login.jsp'"/>
					<input id="btn3" type="reset" value="清空"/>
					</td>
				</tr>
			</table>
		</form>
	</div>
</body>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript">
	function regeisterName(textObj){
		var sLoginName = textObj.value;
		var obj = new Object();
		if(sLoginName == "" ){
			alert("请填写用户名");
		}else{
			obj.sLoginName = sLoginName;
			$.ajax({
				//请求地址
				url:"login/registerGetUser.action",
				//是否是异步
				async:false,
				//回执的数据类型，默认为普通字符串
				dataType:"json",
				//请求的数据
				data:obj,
				//请求后的回调方法
				success:function(resultData){
					console.log(resultData);
					if(resultData["status"]==-1){
						$("#td1").text("该用户名已经存在");
						$("#td1").css({"color":"red"});
					}else if(resultData["status"]==1){
						$("#td1").text("该用户名可以使用");
						$("#td1").css({"color":"black"});
					}
				},
				type:"POST"
			});
		}
	}
</script>
</html>